<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>产品详情</title>
  <link rel="stylesheet" href="css/weui.css"/>
  <link rel="stylesheet" href="css/weuix.css"/>
  <link rel="stylesheet" href="css/style.css">


  <script src="js/common/zepto.min.js"></script>
  <script src="js/common/zepto.weui.js"></script>
  <script src="js/common/swipe.js"></script>
  <script src="js/common/common.js"></script>
</head>
<body ontouchstart>

    <div class="weui-flex head-con">
        <div class="weui-flex__item weui-flex__item_left"><div class="placeholder"><a href="product.html"><span class="icon icon-109"></span></a></div></div>
        <div class="weui-flex__item"><div class="placeholder">产品详情</div></div>
        <div class="weui-flex__item weui-flex__item_right"><div class="placeholder"><a href="#"><span class="icon icon-40"></span></a></div></div>
    </div>

    <div style="height:48px;"></div>

    <div class="slide" id="slide2">
        <ul>
            <li>
                <a href="javascript:;">
                    <img src='images/banner.jpg' alt="">
                </a>

            </li>
            <li>
                <a href="javascript:;">
                    <img src='images/banner.jpg' alt="">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src='images/banner.jpg' alt="">
                </a>
            </li>
        </ul>
        <div class="dot">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>

    <div class="weui-panel__bd product-detail-info">
        <div class="weui-media-box weui-media-box_text">
            <h4 class="weui-media-box__title">商品名称</h4>
            <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
            <div class="price-box"><em class="price">￥120.00</em></div>
        </div>
    </div>

    <div class="weui-cells mt_0">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <p>优衣库轻薄羽绒服</p>
            </div>
            <div class="weui-cell__ft">
                <div class="weui-count">
                    <a class="weui-count__btn weui-count__decrease"></a>
                    <input class="weui-count__number" type="number" value="1" />
                    <a class="weui-count__btn weui-count__increase"></a>
                </div>
            </div>
        </div>
    </div>

    <div class="weui-cells mt_0">
        <a class="weui-cell weui-cell_access" href="javascript:;">
            <div class="weui-cell__bd">
                <p>促销</p>
            </div>
            <div class="weui-cell__ft">限时促销购买省100元</div>
        </a>
        <a class="weui-cell weui-cell_access" href="javascript:;">
            <div class="weui-cell__bd">
                <p>已选</p>
            </div>
            <div class="weui-cell__ft">型号一，尺寸</div>
        </a>
    </div>

    <div class="product-detail-content">
        <h2 class="title">产品详情</h2>
        <div class="content">
            <!-- <img src="images/banner.jpg" class="img-max"> -->
        </div>
    </div>

    <div style="height:55px;"></div>

    <!-- 导航 -->
    <div class="product-nav">
        <div class="weui-flex">
            <div class="weui-flex__item"><button class="weui-btn weui-btn_primary">加入购物车</button></div>
            <div class="weui-flex__item"><button class="weui-btn weui-btn_warn">立即购买</button></div>
        </div>
    </div>

    <script>
        $(function(){
            $('#slide2').swipeSlide({
                autoSwipe:true,//自动切换默认是
                speed:3000,//速度默认4000
                continuousScroll:true,//默认否
                transitionType:'cubic-bezier(0.22, 0.69, 0.72, 0.88)',//过渡动画linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier
                lazyLoad:true,//懒加载默认否
                firstCallback : function(i,sum,me){
                    me.find('.dot').children().first().addClass('cur');
                },
                callback : function(i,sum,me){
                    me.find('.dot').children().eq(i).addClass('cur').siblings().removeClass('cur');
                }
            });

            var MAX = 99, MIN = 1;
            $('.weui-count__decrease').click(function (e) {
                var $input = $(e.currentTarget).parent().find('.weui-count__number');
                var number = parseInt($input.val() || "0") - 1
                if (number < MIN) number = MIN;
                $input.val(number)
            })
            $('.weui-count__increase').click(function (e) {
                var $input = $(e.currentTarget).parent().find('.weui-count__number');
                var number = parseInt($input.val() || "0") + 1
                if (number > MAX) number = MAX;
                $input.val(number)
            })
        });
    </script>

</body>
</html>